<template>
    <el-dialog
      :visible.sync="visible"
      title="校核进度"
      :close-on-click-modal="false"
      append-to-body
      width="300px"
      :center="true"
      :show-close="false"
      :modal-append-to-body="true"
      :close-on-press-escape="false"
    >
      <div style="width: 100%;height: 100%;margin: auto;text-align: center;vertical-align: center">
        <div style="height: 150px">
          <el-progress type="circle" :percentage="percentage" :color="colors"></el-progress>
        </div>
        <div>
          <span v-if="msgShow">
            <span v-if="type === '1'">
             已校核<span style="color: green">{{finishCount}}</span>个机构，共计需要校核<span style="color: red">{{checkPersonCount}}</span>个机构
            </span>
            <span v-else>
             已校核<span style="color: green">{{finishCount}}</span>人，共计需要校核<span style="color: red">{{checkPersonCount}}</span>人
            </span>
          </span>
          <span v-else>
            <span>校核数据获取中，请稍候……</span>
          </span>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script>
    import store from '@/store'
    import {isCheckFinish} from '@/api/datacentersz/dataCheck/dataCheck'
  
    export default {
      name: 'validateProgress',
      components: {
      },
      props: {},
      data () {
        return {
          visible: false,
          myInterval: '',
          percentage: 0,
          colors: [
            {color: '#f56c6c', percentage: 20},
            {color: '#f56c6c', percentage: 40},
            {color: '#e6a23c', percentage: 60},
            {color: '#e6a23c', percentage: 80},
            {color: '#5cb87a', percentage: 100}
          ],
          finishCount: 0,
          checkPersonCount: 0,
          type: '',
          msgShow: false
        }
      },
      computed: {},
      created () {
      },
      mounted () {
      },
      watch: {
      },
      destroyed () {
        clearInterval(this.myInterval)
      },
      methods: {
        init(type) {
          this.visible = true
          this.type = type
          this.percentage = 0
          this.isCheckFinish()
        },
        isCheckFinish() {
          let that = this
          const params = {
            'userId': store.getters.user_id.toString(),
            'token': store.getters.token.toString(),
            'system': 'officedo',
            'data': {
              type: this.type
            }
          }
          this.myInterval = window.setInterval(() => {
            setTimeout(() => {  //调用接口的方法
              isCheckFinish(params).then(response => {
                if(response.result){
                  if(response.resultdata.finishCount !== null && response.resultdata.checkPersonCount !== 0 && response.resultdata.checkPersonCount !== null && response.resultdata.checkPersonCount !== '0'){
                    that.msgShow = true
                    that.percentage = Math.floor(Math.round(response.resultdata.finishCount / response.resultdata.checkPersonCount * 10000) / 100)
                  }else {
                    that.msgShow = false
                    that.percentage = 0
                  }
                  if(response.resultdata.finishCount !== null){
                    that.finishCount = response.resultdata.finishCount
                  }
                  if(response.resultdata.checkPersonCount !== null){
                    that.checkPersonCount = response.resultdata.checkPersonCount
                  }
                  if(response.resultdata.checkResult === 1){
                    that.$message.success('校核已完成！')
                    that.progressFinished()
                  }
                }else {
                  that.$message.success('校核失败！')
                  that.progressFinished()
                }
              })
            }, 1)
          }, 1000);
        },
        progressFinished() {
          clearInterval(this.myInterval)
          this.$emit('validateFinished')
          this.visible = false
        }
      }
    }
  </script>
  
  <style scoped>
  
  </style>
  